<!--
 * @Author: 137 '1432417996@qq.com'
 * @Date: 2025-03-30 16:53:36
 * @LastEditors: 137 '1432417996@qq.com'
 * @LastEditTime: 2025-05-20 03:42:03
 * @FilePath: \starter-3\components\HeadLine.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>

// 登录弹窗
import { Picture as IconPicture,Avatar } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from "vue";
import { useRouter } from "#vue-router";
import { User, Expand, Fold } from "@element-plus/icons-vue";
import { useUserStore } from '~/stores/user'
import { getMyInfo } from '@/api/user'


const loginDialogShow = ref(false) // 登录弹窗
const loginDialogState = ref(true) // 默认登录
const token = ref('')
const isExpand = ref(false)
const topMenuActive = ref(-1)
const userStore = useUserStore()
onMounted(() => {
  token.value = userStore.token || localStorage.getItem('token')
  // 获取当前路径并设置高亮菜单
  const currentPath = window.location.pathname
  const currentMenu = topMenu.value.findIndex(item => item.link === currentPath)
  if (currentMenu !== -1) {
    topMenuActive.value = currentMenu
  }
})

const userInfo = ref({
  nickName: '',
  avatar: '',
  name: '',
  email: '',
  phone: '',
  address: '',
})

const getUserInfo = async () => {
  if (userInfo.value.name) {
    return
  }
  const res = await getMyInfo()
  userInfo.value = res.data
}

// 监听全局登录弹窗状态
watch(
  () => userStore.showLoginDialog,
  (newVal) => {
    loginDialogShow.value = newVal
    // 当弹窗关闭时
    if (!newVal) {
      // 检查登录状态
      if (userStore.token) {
        // 登录成功，刷新当前页面
        //router.go(0)
      } else {
        // 未登录成功，只在个人中心页面时跳转到首页
        const currentPath = window.location.pathname
        if (currentPath.startsWith('/userPage')) {
          router.push('/')
        }
      }
    }
  }
)

watch(
  () => userStore.token,
  (nv, ov) => {
    token.value = nv;
    if(token.value){
      getUserInfo();
    }
    //mainMenuTitle = newPath
  },
  { deep: true, immediate: false }
);

const topMenu = ref([{
  name: '首页',
  link: '/',
}, {
  name: '出海品牌',
  link: '/channel',
},
//  {
//   name: '头条资讯',
//   link: '/information/informationList',
// }, 
// {
//   name: '需求发布',
//   link: '',
// },
//  {
//   name: '加入社群',
//   link: '',
// }, 
{
  name: '活动报名',
  link: '/activity/activityList',
}, 
// {
//   name: '出海避坑',
//   link: '',
// },

])

const router = useRouter()

// 跳转活动页
const goMobileLink = (link, index) => {
  isExpand.value = false;
  goLink(link, index)
}

// 跳转活动页
const goLink = (link, index) => {
  topMenuActive.value = index;
  router.push({ path: link });
}
// 打开登录弹窗
const openLoginDialog = (state) => {
  console.log('打开')
  loginDialogState.value = state;
  userStore.setShowLoginDialog(true);
  isExpand.value = false;
}

// 前往个人中心
const goUser = (state) => {
  if (localStorage.getItem('token')) {
    router.push({ path: '/userPage/basicInformation' });
    topMenuActive.value = null;
  }
}
const centerDialogVisible = ref(false)

const exit = () => {
  userStore.clearUser()
  router.push({ path: '/' });
  centerDialogVisible.value = false;
}


</script>

<template>
  <el-drawer v-model="isExpand" direction="ltr" size="60%">
    <div class="drawer-content-mobile">
      <div class="user-info">
        <el-image class="user-avatar" :src="userInfo.avatar" fit="cover">
          <template #placeholder>
            <div class="image-slot">
              <el-icon><icon-picture /></el-icon>
            </div>
          </template>
          <template #error>
            <div class="image-slot">
              <el-icon><Avatar /></el-icon>
            </div>
          </template>
        </el-image>
        <div class="user-name" @click="!token ? openLoginDialog(true) : ''">{{ userInfo.nickName || "点击登录" }}</div>
      </div>
      <div class="nav-links">
        <div class="menu-item" v-for="(item, index) in topMenu" :class="{ 'active': topMenuActive === index }"
          @click="goMobileLink(item.link, index)">{{ item.name }}</div>
      </div>
      <div class="nav-links">
        <div class="menu-item"@click="exit" v-if="token">退出</div>
      </div>
    </div>
  </el-drawer>
  <div class="navbar" id="top">
    <div class="expand-icon-box" @click="isExpand = !isExpand">
      <el-icon v-if="isExpand">
        <Fold />
      </el-icon>
      <el-icon v-else>
        <Expand />
      </el-icon>
    </div>
    <div class="logo"></div>

    <div class="nav-links">
      <div class="menu-item" v-for="(item, index) in topMenu" :class="{ 'active': topMenuActive === index }"
        @click="goLink(item.link, index)">{{ item.name }}</div>
    </div>
    <div class="auth-buttons">
      <div class="login-box">
        
        <div @click="goUser" style="display: flex;align-items: center" v-if="token">
          <client-only>
            <el-icon>
              <User />
            </el-icon>
            <span style="margin-left: 2px">个人中心
            </span>
          </client-only>
        </div>
        <span @click="openLoginDialog(true)" style="margin-left: 15px" v-if="!token">登录</span>
        <span @click="openLoginDialog(false)" style="margin-left: 15px" v-if="!token">注册</span>
        <span @click="exit" style="margin-left: 15px" v-else>退出</span>
      </div>
      <!--      <button class="login" >登录</button>-->
      <!--      <button class="register" @click="openLoginDialog(false)">注册</button>-->
    </div>
  </div>
  <client-only>
    <el-dialog v-model="centerDialogVisible" :z-index="9999" title="提示" width="500" center>
      <span>
        是否确认退出?
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="exit">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <login-dialog v-model:loginShow="loginDialogShow" v-model:isLogin="loginDialogState" v-if="loginDialogShow">
    </login-dialog>
  </client-only>
</template>

<style scoped></style>